<script setup lang="ts">
import axiosInstance from '@/utils/http.js';
import { ElMessage } from 'element-plus';
import { onMounted, ref } from 'vue';
import * as echarts from 'echarts';
onMounted(() => {
  console.log('WelcomeItem mounted');
  // 发送请求
  // submitData();
  initData();
  initPieChart();
  initPieChart2();
  initPieChart3();
  initPieChart4();
  initPieChart5();
  initPieChart6();
  initPieChart7();
  initPieChart8();
});
const initPieChart8 = async () => {
  const pieChart = echarts.init(document.getElementById('pieChart8'));
  const data0 = [
    { value: 1548, name: '环比' },
    { value: 335, name: '发票数量' },
    { value: 310, name: '支出总数' },
    { value: 234, name: '回扣总额' }
  ]
  const option = {
    // 设置标题
    title: {
      text: '支出统计',
      left: 'left', // 标题位于左上角
      top: 'top'
    },

    // 设置图例
    legend: {
      orient: 'vertical', // 图例垂直排列
      right: 'right', // 图例位于右侧
      top: 'center', // 图例居中对齐
      data: [data0[0].name, data0[1].name, data0[2].name, data0[3].name]
    },

    // 配置系列数据
    series: [
      {
        name: '访问来源',
        type: 'pie',
        radius: ['20%', '35%'],
        center: ['40%', '50%'], // 饼图中心位置
        data: data0,
        itemStyle: {
          emphasis: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        },
        label: {
          show: true,
          position: 'outside', // 将标签放置在扇区外部
          // formatter: '{b} : {c} ({d}%)', // 显示名称、数值和百分比
          formatter: '{c} ({d}%)', // 显示名称、数值和百分比
          rich: {
            // 使用 rich 文本格式化器可以创建复杂的标签样式
          }
        },
        labelLine: {
          show: true // 显示引导线
        }
      }
    ]
  };

  // 使用刚指定的配置项和数据显示图表。
  pieChart.setOption(option);
}
const initPieChart7 = async () => {
  const pieChart = echarts.init(document.getElementById('pieChart7'));
  const data0 = [
    { value: 1548, name: '环比' },
    { value: 335, name: '审批数量' },
    { value: 310, name: '已处理' },
    { value: 234, name: '未处理' },
    { value: 135, name: '处理中' }
  ]
  const option = {
    // 设置标题
    title: {
      text: '审批统计',
      left: 'left', // 标题位于左上角
      top: 'top'
    },

    // 设置图例
    legend: {
      orient: 'vertical', // 图例垂直排列
      right: 'right', // 图例位于右侧
      top: 'center', // 图例居中对齐
      data: [data0[0].name, data0[1].name, data0[2].name, data0[3].name, data0[4].name]
    },

    // 配置系列数据
    series: [
      {
        name: '访问来源',
        type: 'pie',
        radius: ['20%', '35%'],
        center: ['40%', '50%'], // 饼图中心位置
        data: data0,
        itemStyle: {
          emphasis: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        },
        label: {
          show: true,
          position: 'outside', // 将标签放置在扇区外部
          // formatter: '{b} : {c} ({d}%)', // 显示名称、数值和百分比
          formatter: '{c} ({d}%)', // 显示名称、数值和百分比
          rich: {
            // 使用 rich 文本格式化器可以创建复杂的标签样式
          }
        },
        labelLine: {
          show: true // 显示引导线
        }
      }
    ]
  };

  // 使用刚指定的配置项和数据显示图表。
  pieChart.setOption(option);
}
const initPieChart6 = async () => {
  const pieChart = echarts.init(document.getElementById('pieChart6'));
  const data0 = [
    { value: 1548, name: '环比' },
    { value: 335, name: '工单总数' },
    { value: 310, name: '已处理' },
    { value: 234, name: '未处理' },
    { value: 135, name: '处理中' }
  ]
  const option = {
    // 设置标题
    title: {
      text: '工单统计',
      left: 'left', // 标题位于左上角
      top: 'top'
    },

    // 设置图例
    legend: {
      orient: 'vertical', // 图例垂直排列
      right: 'right', // 图例位于右侧
      top: 'center', // 图例居中对齐
      data: [data0[0].name, data0[1].name, data0[2].name, data0[3].name, data0[4].name]
    },

    // 配置系列数据
    series: [
      {
        name: '访问来源',
        type: 'pie',
        radius: ['20%', '35%'],
        center: ['40%', '50%'], // 饼图中心位置
        data: data0,
        itemStyle: {
          emphasis: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        },
        label: {
          show: true,
          position: 'outside', // 将标签放置在扇区外部
          // formatter: '{b} : {c} ({d}%)', // 显示名称、数值和百分比
          formatter: '{c} ({d}%)', // 显示名称、数值和百分比
          rich: {
            // 使用 rich 文本格式化器可以创建复杂的标签样式
          }
        },
        labelLine: {
          show: true // 显示引导线
        }
      }
    ]
  };

  // 使用刚指定的配置项和数据显示图表。
  pieChart.setOption(option);
}

const initPieChart5 = async () => {
  const pieChart = echarts.init(document.getElementById('pieChart5'));
  const data0 = [
    { value: 1548, name: '环比' },
    { value: 335, name: '订单数量' },
    { value: 310, name: '订单总额' },
    { value: 234, name: '发票数量' },
    { value: 135, name: '发票总额' },
    { value: 1548, name: '退款数量' },
    { value: 1548, name: '退款总额' }
  ]
  const option = {
    // 设置标题
    title: {
      text: '收入统计',
      left: 'left', // 标题位于左上角
      top: 'top'
    },

    // 设置图例
    legend: {
      orient: 'vertical', // 图例垂直排列
      right: 'right', // 图例位于右侧
      top: 'center', // 图例居中对齐
      data: [data0[0].name, data0[1].name, data0[2].name, data0[3].name, data0[4].name, data0[5].name, data0[6].name]
    },

    // 配置系列数据
    series: [
      {
        name: '访问来源',
        type: 'pie',
        radius: ['20%', '35%'],
        center: ['40%', '50%'], // 饼图中心位置
        data: data0,
        itemStyle: {
          emphasis: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        },
        label: {
          show: true,
          position: 'outside', // 将标签放置在扇区外部
          // formatter: '{b} : {c} ({d}%)', // 显示名称、数值和百分比
          formatter: '{c} ({d}%)', // 显示名称、数值和百分比
          rich: {
            // 使用 rich 文本格式化器可以创建复杂的标签样式
          }
        },
        labelLine: {
          show: true // 显示引导线
        }
      }
    ]
  };

  // 使用刚指定的配置项和数据显示图表。
  pieChart.setOption(option);
}
const initPieChart4 = async () => {
  const pieChart = echarts.init(document.getElementById('pieChart4'));

  const option = {
    // 设置标题
    title: {
      text: '储存统计',
      left: 'left', // 标题位于左上角
      top: 'top'
    },

    // 设置图例
    legend: {
      orient: 'vertical', // 图例垂直排列
      right: 'right', // 图例位于右侧
      top: 'center', // 图例居中对齐
      data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
    },

    // 配置系列数据
    series: [
      {
        name: '访问来源',
        type: 'pie',
        radius: ['20%', '35%'],
        center: ['13%', '50%'], // 饼图中心位置
        data: [
          { value: 335, name: '直接访问' },
          { value: 310, name: '邮件营销' },
          { value: 234, name: '联盟广告' },
          { value: 135, name: '视频广告' },
          { value: 1548, name: '搜索引擎' }
        ],
        itemStyle: {
          emphasis: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        },
        label: {
          show: true,
          position: 'outside', // 将标签放置在扇区外部
          // formatter: '{b} : {c} ({d}%)', // 显示名称、数值和百分比
          formatter: '{c} ({d}%)', // 显示名称、数值和百分比
          rich: {
            // 使用 rich 文本格式化器可以创建复杂的标签样式
          }
        },
        labelLine: {
          show: true // 显示引导线
        }
      }
    ]
  };

  // 使用刚指定的配置项和数据显示图表。
  pieChart.setOption(option);
}
const initPieChart3 = async () => {
  const pieChart = echarts.init(document.getElementById('pieChart3'));
  const data0 = [
    { value: 335, name: '环比' },
    { value: 310, name: '网站订阅' },
    { value: 234, name: '收银系统' }
  ]
  const option = {
    // 设置标题
    title: {
      text: '订阅统计',
      left: 'left', // 标题位于左上角
      top: 'top'
    },
    // 设置图例
    legend: {
      orient: 'vertical', // 图例垂直排列
      right: 'right', // 图例位于右侧
      top: 'center', // 图例居中对齐
      data: [data0[0].name, data0[1].name, data0[2].name]
    },

    // 配置系列数据
    series: [
      {
        name: '访问来源',
        type: 'pie',
        radius: ['20%', '35%'],
        center: ['40%', '50%'], // 饼图中心位置
        data: data0,
        itemStyle: {
          emphasis: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        },
        label: {
          show: true,
          position: 'outside', // 将标签放置在扇区外部
          // formatter: '{b} : {c} ({d}%)', // 显示名称、数值和百分比
          formatter: '{c} ({d}%)', // 显示名称、数值和百分比
          rich: {
            // 使用 rich 文本格式化器可以创建复杂的标签样式
          }
        },
        labelLine: {
          show: true // 显示引导线
        }
      }
    ]
  };

  // 使用刚指定的配置项和数据显示图表。
  pieChart.setOption(option);
}
const initPieChart2 = async () => {
  const pieChart = echarts.init(document.getElementById('pieChart2'));
  const data0 = [
    { value: 335, name: '环比' },
    { value: 310, name: 'ipad' },
    { value: 234, name: 'ihone' },
    { value: 135, name: '快递打印机' },
    { value: 1548, name: '标签打印机' },
    { value: 1548, name: '扫描器' },
    { value: 1548, name: '80mm打印机' }
  ]
  const option = {
    // 设置标题
    title: {
      text: '硬件统计',
      left: 'left', // 标题位于左上角
      top: 'top'
    },

    // 设置图例
    legend: {
      orient: 'vertical', // 图例垂直排列
      right: 'right', // 图例位于右侧
      top: 'center', // 图例居中对齐
      data: [data0[0].name, data0[1].name, data0[2].name, data0[3].name, data0[4].name, data0[5].name, data0[6].name]
    },

    // 配置系列数据
    series: [
      {
        name: '访问来源',
        type: 'pie',
        radius: ['20%', '35%'],
        center: ['40%', '50%'], // 饼图中心位置
        data: data0,
        itemStyle: {
          emphasis: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        },
        label: {
          show: true,
          position: 'outside', // 将标签放置在扇区外部
          // formatter: '{b} : {c} ({d}%)', // 显示名称、数值和百分比
          formatter: '{c} ({d}%)', // 显示名称、数值和百分比
          rich: {
            // 使用 rich 文本格式化器可以创建复杂的标签样式
          }
        },
        labelLine: {
          show: true // 显示引导线
        }
      }
    ]
  };

  // 使用刚指定的配置项和数据显示图表。
  pieChart.setOption(option);
}
const initPieChart = async () => {
  const pieChart = echarts.init(document.getElementById('pieChart'));
  const data0 = [
    { value: 335, name: '环比' },
    { value: 310, name: '管理' },
    { value: 234, name: '商户' },
    { value: 135, name: '用户' },
    { value: 1548, name: '骑士' },
    { value: 1548, name: '会员' },
    { value: 1548, name: '客服' }
  ]
  const option = {
    // 设置标题
    title: {
      text: '账户统计',
      left: 'left', // 标题位于左上角
      top: 'top'
    },

    // 设置图例
    legend: {
      orient: 'vertical', // 图例垂直排列
      right: 'right', // 图例位于右侧
      top: 'center', // 图例居中对齐
      data: [data0[0].name, data0[1].name, data0[2].name, data0[3].name, data0[4].name, data0[5].name, data0[6].name]
    },

    // 配置系列数据
    series: [
      {
        name: '统计',
        type: 'pie',
        radius: ['20%', '35%'],
        center: ['40%', '50%'], // 饼图中心位置
        data: data0,
        itemStyle: {
          emphasis: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        },
        label: {
          show: true,
          position: 'outside', // 将标签放置在扇区外部
          // formatter: '{b} : {c} ({d}%)', // 显示名称、数值和百分比
          formatter: '{c} ({d}%)', // 显示名称、数值和百分比
          rich: {
            // 使用 rich 文本格式化器可以创建复杂的标签样式
          }
        },
        labelLine: {
          show: true // 显示引导线
        }
      }
    ]
  };

  // 使用刚指定的配置项和数据显示图表。
  pieChart.setOption(option);
}
const generateDoubleLineData = () => {
  // 定义图表的数据
  const xAxisData = ['1', '5', '10', '15', '20', '25', '30'];
  const yAxisData1 = [120, 200, 150, 80, 70, 110, 130];
  const yAxisData2 = [80, 100, 90, 60, 50, 70, 90];
  return [xAxisData, yAxisData1, yAxisData2];
};
const initData = async () => {
  // 基于准备好的dom，初始化echarts实例
  const lineChart = echarts.init(document.getElementById('lineChart'));
  
  const [xAxisData, yAxisData1, yAxisData2] = generateDoubleLineData();
  // 配置图表的选项
  const option = {
    xAxis: {
      type: 'category',
      data: xAxisData
    },
    yAxis: {
      type: 'value',
      axisLabel: {
        formatter: '{value}M'
      }
    },
    tooltip: {
      trigger: 'axis'
    },
    // toolbox: {
    //   show: true,
    //   feature: {
    //     dataZoom: {
    //       yAxisIndex: 'none'
    //     },
    //     dataView: { readOnly: false },
    //     magicType: { type: ['line', 'bar'] },
    //     restore: {},
    //     saveAsImage: {}
    //   }
    // },
    series: [
      {
        data: yAxisData1,
        type: 'line',
        smooth: true,
        name: 'A',
        label: {
          show: true,
          position: 'top'
        },
        itemStyle: {
          color: '#800080' // 为第一个系列指定颜色
        },
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
            offset: 0,
            color: 'rgba(128, 0, 128, 0.3)' // 起始颜色 (半透明紫色)
          }, {
            offset: 1,
            color: 'rgba(128, 0, 128, 0)' // 结束颜色 (完全透明)
          }])
        }
      },
      {
        data: yAxisData2,
        type: 'line',
        smooth: true,
        name: 'B',
        label: {
          show: true,
          position: 'top'
        },
        itemStyle: {
          color: '#999999' // 为第二个系列指定不同的颜色
        }
      }
    ]
  };
  // 使用刚指定的配置项和数据显示图表
  lineChart.setOption(option);
};
// const formData = ref({
//   "phone": "13681630454",
//   "countryCode": "+86",
//   "password": "12345678"
// });
// const submitData = async () => {
//     try {
//         const response = await axiosInstance.post('/auth-center/api/auth/v1/login', formData.value); // 发起POST请求，将formData作为请求体数据发送
//         console.log('response',response)
//         ElMessage.success('数据提交成功');
//     } catch (error) {
//         ElMessage.error('数据提交失败');
//     }
// };
</script>
<template>
  <div>
    <div id="lineChart" style="width: 100%; height: 400px"></div>
    <div class="pie_div">
      <div id="pieChart" class="pic_back" ></div>
      <div id="pieChart2" class="pic_back" ></div>
      <div id="pieChart3" class="pic_back" ></div>
    </div>
    <div id="pieChart4" class="pic_back2" style="margin-top: 10px;" ></div>
    <div class="pie_div">
      <div id="pieChart5" class="pic_back" ></div>
      <div id="pieChart6" class="pic_back" ></div>
      <div id="pieChart7" class="pic_back" ></div>
      <div id="pieChart8" class="pic_back" ></div>
    </div>
  </div>
</template>

<style scoped>
.pie_div {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.pic_back {
  width: 33%; 
  height: 240px;
  background-color: #F9F9FA;
  border-radius: 10px;
  box-sizing: border-box;
  padding: 10px;
  margin-top: 10px;
}
.pic_back2 {
  width: 100%; 
  height: 300px;
  background-color: #F9F9FA;
  border-radius: 10px;
  box-sizing: border-box;
  padding: 10px;
}
</style>
